import React, { Component } from 'react'
import {
    Card,
    Table,
    Button,
    message

}from 'antd'
import { roleData,addRole,reqUpdateRole } from '../../api';
import AddForm from './add-form.js'
import AuthForm from './auth-form.js'
import {formatDate} from '../../utils/defaultDate.js'
import memoryUtils from '../../utils/memoryUtils'
import storeUtils from '../../utils/storeUtils.js'


class Role extends Component {

    constructor(props){
        super(props);
        this.state={
            roleDataList:[],
    
        role:{},
        showAddFormModal:false,
        showAuthFormModal:false

        }

        this.auth = React.createRef()
    }

 



     getRoleDataList= async ()=>{
         const result =  await roleData()
         if(result.status===0){
             this.setState({
                 roleDataList:result.data
             })
            message.success('数据发送成功')
           
         }
     }
    

     componentDidMount(){
         this.getRoleDataList()
     }

    

       initCloumns=()=>{
          this.columns=[
              {
                  title:'角色名称',
                  dataIndex:'name'
            },
            {
                title:'创建时间',
                dataIndex:'create_time',
                render:(time)=>{
                    return formatDate(time)
              }
              },
              {
                  title:'授权时间',
                dataIndex:'auth_time',
                render:formatDate
             },
             {
                 title:'授权人',
                dataIndex:'auth_name',
          
             },
        
          ]
       }

       componentWillMount (){
           this.initCloumns()
       }


    
       onRow=(role)=>{
           return {
            onClick: event => {
                this.setState({
                    role
                })
            },
           }
        

       }

       addRole=()=>{
           

           this.form.validateFields(async (error,values)=>{
               if(!error){
                   
                   const {roleName} = values
                   this.form.resetFields()
                      const addRoleResult = await addRole(roleName)
                      const role = addRoleResult.data
                      console.log('form表单数据获取===》',addRoleResult)
                      if(addRoleResult.status === 0){
                          this.setState((roleName)=>({
                            roleDataList:[...this.state.roleDataList, role]
                              
                          }))
                          message.success('发送数据成功')
                      }else{
                          message.error('数据发送失败')
                      }
               }
           })

           


         this.setState({
             showAddFormModal:false
         })
       }

       updateRole= async ()=>{

        this.setState({
            showAuthFormModal:false
                   
               })

           const role = this.state.role
   
         console.log('更新角色===》',role)

         const menus = this.auth.current.getMenusNode()
 
         role.menus = menus
         role.auth_name = memoryUtils.user.username
        const updateRole = await reqUpdateRole(role)
        if(updateRole.status === 0) {
           
          

            if(role._id===memoryUtils.user.role_id){
                memoryUtils.user={};
                storeUtils.removeUser()
                this.props.history.replace('/login')
                message.success('用户权限已更新请推出重新登陆')
                
            }
            else{
                message.success('数据请求成功')
                this.getRoleDataList()
            }
        }else{
            message.error('数据请求失败')
        }
         
       }

    render() {
        const{roleDataList,role,showAddFormModal,showAuthFormModal} = this.state
        const title =(
            <span>
                <Button type='primary' onClick={()=>{
                    this.setState({showAddFormModal:true})
                    this.form.resetFields()
                    }}>创建角色</Button>
                &nbsp;
                &nbsp;
                <Button type='primary' disabled={!role._id}  onClick={()=>{
               
                    this.setState({
                        showAuthFormModal:true
                    })
                }}>设置角色权限</Button>
            </span>
        )
        return (
            <div>
                <Card title={title}>
                   <Table
                     rowKey= "_id"
                     bordered
                   columns={this.columns}
                   pagination={{
                     defaultPageSize:5,
                     showQuickJumper:true
                   }}
                    dataSource={roleDataList} 
                    
                    rowSelection={{
                        type:'radio',
                        selectedRowKeys:[role._id],
                        onSelect:(role)=>{
                            this.setState({
                                role
                            })
                             
                        }
                    }}
                    onRow={this.onRow}

                  
                    />
                   <AddForm 
                        visible ={showAddFormModal}
                        onOk={this.addRole}
                        onCancel={()=>{this.setState({showAddFormModal:false})}}

                        setForm={form=>this.form=form}
                    
                   />

                   <AuthForm  
                   role={role}
                   visible ={showAuthFormModal}
                   ref={this.auth}
                  onOk={this.updateRole}
                  onCancel={()=>{this.setState({showAuthFormModal:false})}}
                   />
                </Card>
            </div>
        )
    }
}

export default Role